<form class="execution-metrics" name="form">

  <div class="row">
    <div class="col-xs-12">
      <h3>{{ 'EXECUTION_METRICS' | translate }}</h3>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <div uib-alert class="alert alert-info">
        <p>
          {{ 'EXECUTION_METRICS_INFO_1' | translate }}
          <strong>{{ 'EXECUTION_METRICS_FNI' | translate }}</strong>,
          <strong>{{ 'EXECUTION_METRICS_EDE' | translate }}</strong>,
          <strong>{{ 'EXECUTION_METRICS_RPI' | translate }}</strong>
          {{ 'EXECUTION_METRICS_AND' | translate }}
          <strong>{{ 'EXECUTION_METRICS_DI' | translate }}</strong>
          {{ 'EXECUTION_METRICS_INFO_2' | translate }}
          {{ 'EXECUTION_METRICS_AND' | translate }}
          <strong>{{ 'EXECUTION_METRICS_TW' | translate }}</strong>
          {{ 'EXECUTION_METRICS_INFO_3' | translate }}
          {{ 'EXECUTION_METRICS_INFO_4' | translate }}
        </p>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="form-group col-xs-12">
      <label for="startDate">
        {{ 'EXECUTION_METRICS_START_DATE' | translate }}
      </label>
      <div>
        <span cam-widget-inline-field
              id="startDate"
              class="form-control-static"
              type="date"
              value="startDate"
              date-format="fmtDatePicker"
              date-picker-options="datePickerOptions"
              flexible="true">
                <a class="form-control-static">{{startDate}}</a>
        </span>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-8">
      <h4 class="pull-left">
        {{ 'EXECUTION_METRICS_MONTHLY_TABLE_TITLE' | translate }}
      </h4>
    </div>
    <div class="col-xs-4">
      <div class="pull-right">
        <label class="checkbox">
          <input type="checkbox" ng-model="displayLegacyMetrics">
          {{ 'EXECUTION_METRICS_SHOW_LEGACY' | translate }}
        </label>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 monthly-metrics-chart"
         ng-style="{display: loadingStateMonthly === 'LOADED' ? 'block' : 'none'}">
      <canvas id="monthly-metrics-chart-canvas"></canvas>
    </div>
    <div class="col-xs-12">
      <div cam-widget-loader
           loading-state="{{ loadingStateMonthly }}"
           text-error="{{ loadingErrorMonthly }}">
        <table class="cam-table metrics-monthly"
               ng-class="{'without-legacy': !displayLegacyMetrics}">
          <thead>
          <tr>
            <th>{{ 'EXECUTION_METRICS_MONTHLY_START_DATE' | translate }}</th>
            <th class="metric-header">PI</th>
            <th class="metric-header">DI</th>
            <th class="metric-header">TU
              <span class="glyphicon glyphicon-question-sign"
                    uib-tooltip="{{ 'EXECUTION_METRICS_TU_TOOLTIP' | translate }}"
                    tooltip-placement="left"></span>
            </th>
            <th class="metric-header" ng-show="displayLegacyMetrics">FNI</th>
            <th class="metric-header" ng-show="displayLegacyMetrics">EDE</th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="metric in monthlyMetrics" ng-style="getSubscriptionMonthStyle(metric)">
            <td>{{metric.labelFmt}}</td>
            <td class="metric-row">{{metric['process-instances'].sumFmt}}</td>
            <td class="metric-row">{{metric['decision-instances'].sumFmt}}</td>
            <td class="metric-row">{{metric['task-users'].sumFmt}}</td>
            <td class="metric-row" ng-show="displayLegacyMetrics">{{metric['flow-node-instances'].sumFmt}}</td>
            <td class="metric-row" ng-show="displayLegacyMetrics">{{metric['executed-decision-elements'].sumFmt}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <h4>{{ 'EXECUTION_METRICS_ANNUAL_TABLE_TITLE' | translate }}</h4>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <div cam-widget-loader
           loading-state="{{ loadingStateAnnual }}"
           text-error="{{ loadingErrorAnnual }}"
           text-empty="{{ 'EXECUTION_METRICS_ANNUAL_TABLE_EMPTY' | translate }}">
        <table class="cam-table metrics-annual">
          <thead>
          <tr>
            <th></th>
            <th class="metric-header">PI</th>
            <th class="metric-header">DI</th>
            <th class="metric-header">TU</th>
            <th class="metric-header">FNI</th>
            <th class="metric-header">EDE</th>
            <th class="metric-action-header">{{ 'EXECUTION_METRICS_COPY_HEADER' | translate }}</th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="metric in annualMetrics">
            <td>{{metric.labelFmt}}</td>
            <td class="metric-row">
              <span cam-widget-clipboard="metric['process-instances'].sum.toString()"
                    left-side="true">{{metric['process-instances'].sumFmt}}</span>
            </td>
            <td class="metric-row">
              <span cam-widget-clipboard="metric['decision-instances'].sum.toString()"
                    left-side="true">{{metric['decision-instances'].sumFmt}}</span>
            </td>
            <td class="metric-row">
              <span cam-widget-clipboard="metric['task-users'].sum.toString()"
                    left-side="true">{{metric['task-users'].sumFmt}}</span>
            </td>
            <td class="metric-row">
              <span cam-widget-clipboard="metric['flow-node-instances'].sum.toString()"
                    left-side="true">{{metric['flow-node-instances'].sumFmt}}</span>
            </td>
            <td class="metric-row">
              <span cam-widget-clipboard="metric['executed-decision-elements'].sum.toString()"
                    left-side="true">{{metric['executed-decision-elements'].sumFmt}}</span>
            </td>
            <td class="metric-action-value">
              <span class="hovered" cam-widget-clipboard="getClipboardText(metric)"
                    tooltip-text="{{ 'EXECUTION_METRICS_COPY_TOOLTIP' | translate }}"></span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</form>
